<template>
  <div class="com-container">
    <div class="com-chart" ref="hot_ref"></div>
    <span class='iconfont icon-left' @click="toLeft" :style='comStyle'>&#xe6ef;</span>
    <span class='iconfont icon-right' @click="toRight" :style='comStyle'>&#xe6ed;</span>
    <span class='title-name' :style='comStyle'>{{ titleName }}</span>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme.js'
export default {
  data() {
    return {
      chartInstance: null,
      //   allData: null,// 服务器返回的数据
      allData: [
        {
          name: "女装",
          children: [
            {
              name: "裙装",
              value: 56202,
              children: [
                {
                  name: "套装裙",
                  value: 10281
                },
                {
                  name: "A字裙",
                  value: 22331
                },
                {
                  name: "复古连衣裙",
                  value: 23590
                }
              ]
            },
            {
              name: "女士上衣",
              value: 42013,
              children: [
                {
                  name: "格子衬衫",
                  value: 7896
                },
                {
                  name: "雪纺衫",
                  value: 10422
                },
                {
                  name: "polo衫",
                  value: 23695
                }
              ]
            },
            {
              name: "外套",
              value: 210282,
              children: [
                {
                  name: "牛仔外套",
                  value: 87330
                },
                {
                  name: "针织外套",
                  value: 65770
                },
                {
                  name: "风衣外套",
                  value: 57182
                }
              ]
            },
            {
              name: "裤装",
              value: 168203,
              children: [
                {
                  name: "工装裤",
                  value: 68203
                },
                {
                  name: "阔腿裤",
                  value: 50000
                },
                {
                  name: "牛仔裤",
                  value: 50000
                }
              ]
            },
            {
              name: "特色类目",
              value: 40292,
              children: [
                {
                  name: "大码女装",
                  value: 292
                },
                {
                  name: "旗袍",
                  value: 10000
                },
                {
                  name: "礼服",
                  value: 10000
                }
              ]
            },
            {
              name: "童装",
              value: 20313,
              children: [
                {
                  name: "童衣",
                  value: 5000
                },
                {
                  name: "童裤子",
                  value: 15313
                }
              ]
            }
          ]
        },
        {
          name: "手机数码",
          children: [
            {
              name: "手机",
              value: 201023,
              children: [
                {
                  name: "拍照手机",
                  value: 1023
                },
                {
                  name: "游戏手机",
                  value: 40000
                },
                {
                  name: "全面屏手机",
                  value: 160000
                }
              ]
            },
            {
              name: "手机配件",
              value: 103735,
              children: [
                {
                  name: "手机壳",
                  value: 3735
                },
                {
                  name: "手机贴膜",
                  value: 70000
                },
                {
                  name: "创意配件",
                  value: 30000
                }
              ]
            },
            {
              name: "摄影摄像",
              value: 83834,
              children: [
                {
                  name: "单反相机",
                  value: 3834
                },
                {
                  name: "微单",
                  value: 50000
                },
                {
                  name: "镜头",
                  value: 30000
                }
              ]
            },
            {
              name: "影音娱乐",
              value: 68384,
              children: [
                {
                  name: "耳机/耳麦",
                  value: 30000
                },
                {
                  name: "音箱/音响",
                  value: 8384
                },
                {
                  name: "麦克风",
                  value: 30000
                }
              ]
            },
            {
              name: "数码配件",
              value: 45038,
              children: [
                {
                  name: "存储卡",
                  value: 10000
                },
                {
                  name: "三脚架/云台",
                  value: 5038
                },
                {
                  name: "机身附件",
                  value: 30000
                }
              ]
            },
            {
              name: "智能设备",
              value: 90382,
              children: [
                {
                  name: "智能手环",
                  value: 382
                },
                {
                  name: "智能家居",
                  value: 60000
                },
                {
                  name: "无人机",
                  value: 30000
                }
              ]
            },
            {
              name: "其他",
              value: 10201,
              children: [
                {
                  name: "运营商",
                  value: 10000
                },
                {
                  name: "电子教育",
                  value: 201
                }
              ]
            }
          ]
        },
        {
          name: "美妆护肤",
          children: [
            {
              name: "面部护肤",
              value: 430291,
              children: [
                {
                  name: "乳液/面霜",
                  value: 30291
                },
                {
                  name: "洁面",
                  value: 100000
                },
                {
                  name: "面膜",
                  value: 300000
                }
              ]
            },
            {
              name: "彩妆",
              value: 80284,
              children: [
                {
                  name: "口红",
                  value: 60284
                },
                {
                  name: "粉底液",
                  value: 10000
                },
                {
                  name: "眉笔/眉粉",
                  value: 10000
                }
              ]
            },
            {
              name: "男士护肤",
              value: 40294,
              children: [
                {
                  name: "洁面",
                  value: 10294
                },
                {
                  name: "剃须",
                  value: 5000
                },
                {
                  name: "护肤套装",
                  value: 25000
                }
              ]
            },
            {
              name: "美妆工具",
              value: 50939,
              children: [
                {
                  name: "化妆棉",
                  value: 10939
                },
                {
                  name: "化妆刷",
                  value: 10000
                },
                {
                  name: "双眼皮贴",
                  value: 30000
                }
              ]
            },
            {
              name: "其他",
              value: 10921,
              children: [
                {
                  name: "香水",
                  value: 921
                },
                {
                  name: "当季主推",
                  value: 10000
                }
              ]
            }
          ]
        }
      ],
      currentIndex: 0, // 当前所展示的一级分类数据
      titleFontSize: 0, // 指明标题的字体大小
      timerId: null
    }
  },
  computed: {
    titleName() {
      if(!this.allData){
        return ''
      }else{
        return this.allData[this.currentIndex].name
      }
    },
    comStyle() {
      return{
        fontSize: this.titleFontSize * 1.2 + 'px',
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    clearInterval(this.timerId);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme);
      const initOption = {
        title: {
          text: "▍热销商品占比",
          left: 20,
          top: 12
        },
        legend: {
          top: "15%",
          icon: "circle"
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
        },
        tooltip: {
          show: true,
          // backgroundColor: 'rgba(0,0,0,0.8)',
          // borderColor: 'rgba(0,0,0,.8)',
          // textStyle: {
          //   color: '#fff'
          // },
          formatter: arg => {
            const thirdCategory = arg.data.children
            // 计算出所有三级分类的数值总和
            let total = 0
            thirdCategory.forEach(item => {
              total += item.value
            })
            let addStr = ''
            thirdCategory.forEach(item => {
              addStr += `
              ${item.name}: ${parseInt(item.value / total * 100) + '%'}
              <br/>
              `
            })
            return addStr
          }
        },
        series: [
          {
          type: 'pie',
          // 第一个值内圆半径,第二个值外圆半径
        },
        ]
      };
      this.chartInstance.setOption(initOption);
      //   对图标进行鼠标事件监听
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    async getData() {
    //   const { data: res } = await this.$http.get("hot");
    //   this.allData = res;
      // console.log(this.allData);
      this.updateChart();
      this.startInterval();
    },
    updateChart() {
      // 处理图表需要的数据
      const legendData = this.allData[this.currentIndex].children.map(item => {
        return item.name
      })
      const seriesData = this.allData[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          children: item.children 
        }
      })
      const dataOption = {
        legend: {
          data: legendData
        },
        series: [
          {
            data: seriesData
          }
        ]
      }
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        // 标题
        title: {
          textStyle: {
            fontSize: this.titleFontSize * 1.2
          }
        },
        // 分类文字
        legend: {
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemGap: this.titleFontSize / 2,
          textStyle: {
            fontSize: this.titleFontSize / 1.1
          }
        },
        // 饼图
        series: [
          {
            radius: this.titleFontSize * 4.5,
            center: ['50%', '60%'],
          }
        ],
      }
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    toLeft(){
      this.currentIndex--;
      if(this.currentIndex < 0){
        this.currentIndex = this.allData.length - 1;
      }
      this.updateChart();
    },
    toRight(){
      this.currentIndex++;
      if(this.currentIndex > this.allData.length - 1){
        this.currentIndex = 0;
      }
      this.updateChart();
    },
    startInterval(){
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentIndex++;
        if(this.currentIndex > this.allData.length - 1){
          this.currentIndex = 0
        }
        this.updateChart();
      }, 3000)
    }
  },
  watch: {
    theme(){
      this.chartInstance.dispose();//销毁当前的图表
      this.initChart(); // 重新以最新的主题名称初始化图表对象
      this.screenAdapter(); // 完成屏幕的适配
      this.updateChart(); // 更新图表的展示
    }
  }
};
</script>
<style scoped>
.icon-left,.icon-right{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  cursor: pointer;
}
.icon-left{
  left: 5%;
}
.icon-right{
  right: 5%;
}
.title-name{
  color: white;
  position: absolute;
  right: 15%;
  bottom: 15px;
}
</style>
